<script setup lang="ts">
import { ref, reactive } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import _ from 'lodash'
import { Search, Minus, Plus } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useEnumStore } from "@/store/enumeration";
import { schemeSaveOrUpdatePost } from "@/api/equity";
import useInstance from "@/hooks/useInstance";
import { useComListData } from "@/store/list"
import BlackSelect from "@/components/customSon/blackSelect.vue";
const { listCollect } = useComListData()

defineOptions({
    name: "addConfigAd",
});
const showModel = ref(1)
const {
    schemeType,
    discountsType,
    grantType,
    expiryPeriodType
} = useEnumStore();
const emit = defineEmits(["refresh"]);
const { global } = useInstance();
const dialogBasic = ref({
    title: "新建权益立减金",
    visible: false,
    width: 1200,
    height: 550,
    showFooter: true,
    marginTop: "10vh",
});
const couputedMoney = ref()
const couputedMoney2 = ref()
const ruleFormRef = ref<FormInstance>();
let channelForm = reactive<any>({
    schemeCode: null, //方案编码
    schemeName: null, //方案名称
    schemeType: 1, //方案类型
    //  这个地方就是 如果是类型1 就给第一个对象 如果2 就给两个对象
    configRespList: [
        {
            schemeConfigCode: null, // 权益方案配置编码 discountsType：连续包月：1 签约：2 首周：3
            discountsType: null, //优惠类型
            deductionMoney: null, //扣费金额

            annualStart: null, //期数起
            annualEnd: null, //期数止

            intervalPeriod: null, //续约周期

            periodUnit: 2, //间隔期数单位 

            firstPeriodDay: null, //首期天数（天）
            detailsRespDtoList: [
                // {
                //     schemeConfigCode: null, // 权益方案配置编码
                //     schemeConfigDetailsType: null,//类型

                //     objCode: null,//优惠编码
                //     objName: null,//优惠名称

                //     getNum: null,//领取数量
                //     minusMoney: null,//立减金额
                //     userGetUrl: null,//用户领取链接
                //     grantType: null,//发放方式
                // }
            ],
        },
        {
            schemeConfigCode: null, // 权益方案配置编码 discountsType：连续包月：1 签约：2 首周：3
            discountsType: null, //优惠类型
            deductionMoney: null, //扣费金额
            annualStart: null, //期数起
            annualEnd: null, //期数止
            intervalPeriod: null, //间隔期数
            periodUnit: 2, //间隔期数单位
            firstPeriodDay: null, //首期天数（天）
            detailsRespDtoList: [
                // {
                //     schemeConfigCode: null, // 权益方案配置编码
                //     schemeConfigDetailsType: null,//类型
                //     objCode: null,//优惠编码
                //     objName: null,//优惠名称
                //     getNum: null,//领取数量
                //     minusMoney: null,//立减金额
                //     userGetUrl: null,//用户领取链接
                //     grantType: null,//发放方式
                // }
            ],
        },
    ],
});
const rules = reactive<FormRules>({
    schemeName: [
        {
            required: true,
            trigger: "blur",
            message: "请输入方案名称",
        },
    ],
    schemeType: [
        {
            required: true,
            trigger: "blur",
            message: "请选择方案类型",
        },
    ],
    'configRespList.0.intervalPeriod': [
        {
            required: true,
            trigger: "blur",
            message: "请输入续约周期",
        },
    ],
    'configRespList.1.intervalPeriod': [
        {
            required: true,
            trigger: "blur",
            message: "请输入续约周期",
        },
    ],
    'configRespList.1.deductionMoney': [
        {
            required: true,
            trigger: "blur",
            message: "请输入扣费金额",
        },
    ],
    'configRespList.0.deductionMoney': [
        {
            required: true,
            trigger: "blur",
            message: "请输入扣费金额",
        },
    ],
    'configRespList.0.annualStart': [
        {
            required: true,
            trigger: "blur",
            message: "请输入起始值",
        }
    ],
    'configRespList.0.firstPeriodDay': [
        {
            required: true,
            trigger: "blur",
            message: "请输入首期天数",
        }
    ],
    'configRespList.1.annualStart': [
        {
            required: true,
            trigger: "blur",
            message: "请输入起始值",
        }
    ],
    'configRespList.1.firstPeriodDay': [
        {
            required: true,
            trigger: "blur",
            message: "请输入首期天数",
        }
    ],
    'configRespList.0.annualEnd': [
        {
            required: true,
            trigger: "blur",
            message: "请输入结束值",
        }
    ]
});
//显示弹框
const show = async (type: string, row?: any) => {

    dialogBasic.value.visible = true;
    if (type === "add") {
        dialogBasic.value.title = "新建权益立减金";
        dialogBasic.value.height = 500;

        resetForm();
        showModel.value = 1
        const res = setAllKeysToNull(channelForm)
        Object.assign(channelForm, res);
        await addFirst(1)
        channelForm.schemeType = 1
        channelForm.configRespList[0].periodUnit = 2
    } else {
        dialogBasic.value.height = 550;
        dialogBasic.value.title = "编辑权益立减金";
        Object.assign(channelForm, row);
        // 修改一哈数据
        // 
  
        if (channelForm.schemeType == '1') {
            editFirst(1, channelForm)
        } else {
            editFirst(2, channelForm)
        }
    }
};
const editFirst = (type: number, row: any) => {
    if (type == 1) {

        //configRespList detailsRespDtoList
        if (row.configRespList[0].detailsRespDtoList?.length == 3) {
            money(row.configRespList[0].detailsRespDtoList[0], 1)
            return
        }
        if (!row.configRespList[0].detailsRespDtoList) {
            addFirst(1)
            return
        }
        const arr = row.configRespList[0].detailsRespDtoList.map((item: any) => item.schemeConfigDetailsType)
        if (arr.includes(1)) {
            money(row.configRespList[0].detailsRespDtoList[0], 1)
        }
        if (!arr.includes(1)) {
            editAdd(1, 0, 1)
        }
        if (!arr.includes(2)) {
            editAdd(1, 0, 2)
        }
        if (!arr.includes(3)) {
            editAdd(1, 0, 3)
        }

    } else {
        // 这个就是一个非常
        if (row.configRespList[0].detailsRespDtoList?.length == 3 && row.configRespList[1].detailsRespDtoList?.length == 3) {
            money(row.configRespList[0].detailsRespDtoList[0], 2)
            return
        }

        if (!row.configRespList[0].detailsRespDtoList) {
            addFirst(1)
        }
        if (!row.configRespList[1].detailsRespDtoList) {
            console.log(channelForm.configRespList[1].detailsRespDtoList);
            channelForm.configRespList[1].detailsRespDtoList=[]
            for (let i = 1; i < 4; i++) {
                channelForm.configRespList[1].detailsRespDtoList.push({
                    schemeConfigCode: null,
                    schemeConfigDetailsType: i,
                    objCode: null,
                    objName: null,
                    getNum: null,
                    minusMoney: null,
                    userGetUrl: null,
                    grantType: null,
                })
            }
        }


        const arr0 = row.configRespList[0].detailsRespDtoList.map((item: any) => item.schemeConfigDetailsType)
        const arr1 = row.configRespList[1].detailsRespDtoList.map((item: any) => item.schemeConfigDetailsType)
        if (arr0.includes(1)) {
            money(row.configRespList[0].detailsRespDtoList[0], 1)
        }
        if (arr1.includes(1)) {
            money(row.configRespList[0].detailsRespDtoList[0], 2)
        }
        if (!arr0.includes(1)) {
            editAdd(2, 0, 1)
        }
        if (!arr0.includes(2)) {
            editAdd(2, 0, 2)
        }
        if (!arr0.includes(3)) {
            editAdd(2, 0, 3)
        }

        if (!arr1.includes(1)) {
            editAdd(2, 1, 1)
        }
        if (!arr1.includes(2)) {
            editAdd(2, 1, 2)
        }
        if (!arr1.includes(3)) {
            editAdd(2, 1, 3)
        }
    }
}
const editAdd = (type: number, index: number, itemIndex: number) => {
    const arr = {
        schemeConfigCode: null,
        schemeConfigDetailsType: itemIndex,
        objCode: null,
        objName: null,
        getNum: null,
        minusMoney: null,
        userGetUrl: null,
        grantType: null,
    }
    if (type == 1) {
        channelForm.configRespList[0].detailsRespDtoList.splice(itemIndex - 1, 0, arr)
    } else {
        channelForm.configRespList[index].detailsRespDtoList.splice(itemIndex - 1, 0, arr)
    }
}
const setAllKeysToNull = (obj: any) :any=> {
    if (typeof obj !== 'object' || obj === null) {
        // 如果不是对象或已经是 null，则直接返回
        return obj;
    }

    if (Array.isArray(obj)) {
        // 如果是数组，则遍历每个元素
        return obj.map(item => setAllKeysToNull(item));
    }

    // 如果是普通对象，则遍历每个键值
    const newObj = {};
    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            const value = obj[key];

            if (typeof value === 'object' && value !== null) {
                // 如果是嵌套的对象，则递归处理
                newObj[key] = setAllKeysToNull(value);
            } else {
                // 否则设置为 null
                newObj[key] = null;
            }
        }
    }

    return newObj;
}

const onClose = async () => {
    showModel.value = 1
    couputedMoney.value = 0
    couputedMoney2.value = 0


    ruleFormRef.value?.resetFields()
    ruleFormRef.value?.clearValidate()
    const res = await setAllKeysToNull(channelForm)
    Object.assign(channelForm, res);

    dialogBasic.value.visible = false;
    resetForm();
};

const deleteBtn = (item: number, type: number) => {
    if (type == 1) {
        console.log("111===", item);

        if (channelForm.configRespList[0].detailsRespDtoList.length <= 3) {
            return ElMessage({
                type: "error",
                message: "至少一组数据 不能删除"
            });
        }
        channelForm.configRespList[0].detailsRespDtoList.splice(item - 2, 3)
    } else {

    }

}
const onConfirmSimple = async () => {
    await ruleFormRef.value?.validate(async (isOk) => {
        if (isOk) {
            channelForm.configRespList[0].discountsType = '1'
            channelForm.configRespList.splice(1, 1);
            channelForm.configRespList[0].detailsRespDtoList = channelForm.configRespList[0].detailsRespDtoList.filter((item: any) => item.objCode)

            const res = await schemeSaveOrUpdatePost(channelForm);
            if (res.code == 20000) {
                ElMessage({
                    type: "success",
                    message: channelForm.id ? "方案配置编辑成功" : "方案配置新增成功",
                });
                emit("refresh");
                onClose();
            }

        } else {
            ElMessage({
                type: "error",
                message: channelForm.id
                    ? "方案配置编辑失败 请重试！"
                    : "方案配置新增失败 请重试！",
            });
        }
    });
};
const onConfirmComplex = async () => {
    console.log(channelForm);

    await ruleFormRef.value?.validate(async (isOk) => {
        if (isOk) {
            channelForm.configRespList[0].discountsType = '3'
            channelForm.configRespList[1].discountsType = '2'
            channelForm.configRespList[0].detailsRespDtoList = channelForm.configRespList[0].detailsRespDtoList.filter((item: any) => item.objCode)
            channelForm.configRespList[1].detailsRespDtoList = channelForm.configRespList[1].detailsRespDtoList.filter((item: any) => item.objCode)
            console.log(channelForm.configRespList[0].detailsRespDtoList,);

            channelForm.configRespList[0].detailsRespDtoList = channelForm.configRespList[0].detailsRespDtoList?.length == 0 ? null : channelForm.configRespList[0].detailsRespDtoList
            channelForm.configRespList[1].detailsRespDtoList = channelForm.configRespList[1].detailsRespDtoList?.length == 0 ? null : channelForm.configRespList[1].detailsRespDtoList
            const res = await schemeSaveOrUpdatePost(channelForm);
            if (res.code == 20000) {
                ElMessage({
                    type: "success",
                    message: channelForm.id ? "方案配置编辑成功" : "方案配置新增成功",
                });
                emit("refresh");
                onClose();
            }

        } else {
            ElMessage({
                type: "error",
                message: channelForm.id
                    ? "方案配置编辑失败 请重试！"
                    : "方案配置新增失败 请重试！",
            });
        }
    });
}

const resetForm = () => {
    ruleFormRef.value?.resetFields();
};
defineExpose({
    show,
});

const laterAdd = (type: number) => {
    if (type == 1) {
        for (let i = 1; i < 4; i++) {
            channelForm.configRespList[0].detailsRespDtoList.push({
                schemeConfigCode: null,
                schemeConfigDetailsType: i,
                objCode: null,
                objName: null,
                getNum: null,
                minusMoney: null,
                userGetUrl: null,
                grantType: null,
            })
        }
    } else {
        for (let i = 1; i < 4; i++) {
            channelForm.configRespList[1].detailsRespDtoList.push({
                schemeConfigCode: null,
                schemeConfigDetailsType: i,
                objCode: null,
                objName: null,
                getNum: null,
                minusMoney: null,
                userGetUrl: null,
                grantType: null,
            })
        }

    }

}
const addFirst = (type: number) => {
    // 初始化数据
    channelForm.configRespList[0].detailsRespDtoList = []
    if (type == 1) {
        for (let i = 1; i < 4; i++) {
            channelForm.configRespList[0].detailsRespDtoList.push({
                schemeConfigCode: null,
                schemeConfigDetailsType: i,
                objCode: null,
                objName: null,
                getNum: null,
                minusMoney: null,
                userGetUrl: null,
                grantType: null,
            })
        }

    }
    if (type == 2) {
        console.log(channelForm);

        channelForm.configRespList[1]!.detailsRespDtoList = []
        for (let i = 1; i < 4; i++) {
            channelForm.configRespList[0].detailsRespDtoList.push({
                schemeConfigCode: null,
                schemeConfigDetailsType: i,
                objCode: null,
                objName: null,
                getNum: null,
                minusMoney: null,
                userGetUrl: null,
                grantType: null,
            })
        }
        for (let i = 1; i < 4; i++) {
            channelForm.configRespList[1].detailsRespDtoList.push({
                schemeConfigCode: null,
                schemeConfigDetailsType: i,
                objCode: null,
                objName: null,
                getNum: null,
                minusMoney: null,
                userGetUrl: null,
                grantType: null,
            })
        }
        channelForm.configRespList[1].periodUnit = 2

    }

}
const onConfirm = () => {
    console.log("onConfirm");

}
const onNext = async () => {
    await ruleFormRef.value?.validate(async (isOk) => {
        if (isOk) {
            showModel.value = 2

        }
    })
}
// watch(() => channelForm.schemeType, (newVal, oldVal) => {
//     console.log(newVal, oldVal);
//     if (newVal == 1) {
//         addFirst(1)
//     } else {
//         addFirst(2)
//     }
// }, {
//     deep: true
// })

const money = (val: any, type: number) => {

    if (val.objCode) {
        listCollect.equityList && listCollect.equityList.forEach((item: any) => {
            if (item.key == val.objCode) {
                if (type == 1) {
                    couputedMoney.value = item.money
                }
                if (type == 2) {
                    couputedMoney2.value = item.money
                }
                val.objName = item.objName
            }

        })
    }
}
const radioChange = (item: any) => {
    console.log(item);
    if (item.grantType == '1') {
        item.userGetUrl = null
    }
}
const radioChange2 = (item: any) => {
    if (item.grantType == '1') {
        item.userGetUrl = null
    }
}
const schemeTypeChange = (val:any) => {
    console.log(val,'schemeTypeChange');
    if (val == 1) {
        addFirst(1)
    } else {
        addFirst(2)
    }
    showModel.value = 1
}
</script>

<template>

    <SysDialogSlot :title="dialogBasic.title" :width="dialogBasic.width" :height="dialogBasic.height"
        :show-footer="dialogBasic.showFooter" :visible="dialogBasic.visible" :draggable="true"
        :margin-top="dialogBasic.marginTop" @on-close="onClose" destroy-on-close @on-confirm="onConfirm">
        <template v-slot:content>
            <div class="channel-form">
                <el-form ref="ruleFormRef" :model="channelForm" :rules="rules" label-width="130px" class="demo-ruleForm"
                    status-icon>
                    <!-- 三个面板 怎么玩 什么办法可以让数据一直保存呢 不用频繁的切换 -->
                    <el-form-item label="方案名称" prop="schemeName">
                        <normal-input v-model:model-value="channelForm.schemeName" maxlength="120"
                            show-word-limit></normal-input>
                    </el-form-item>
                    <el-form-item label="选择优惠方案" prop="schemeType">

                        <el-radio-group v-model="channelForm.schemeType" @change="schemeTypeChange">
                            <el-radio v-for="(item, index) in schemeType" :label="item.value" :key="index"
                                :disabled="!!channelForm.id" :value="item.id"> </el-radio>
                        </el-radio-group>

                    </el-form-item>
                    <!-- 头部 第一部分只是有没有 添加的东西-->

                    <template v-if="showModel == 1">
                        <el-divider content-position="left" v-if="channelForm.schemeType == '1'">基础（连续包月）</el-divider>
                        <el-divider content-position="left" v-else>支付（首期优惠）和 签约（续约优惠）</el-divider>


                        <!-- 1 -->
                        <el-form-item label="输入期数" v-if="channelForm.schemeType == '1'">
                            <div style="display: flex;">


                                <el-form-item prop="configRespList.0.annualStart" style="margin-right:10px;">
                                    <el-input-number 
                                        v-model.number="channelForm.configRespList[0].annualStart" clearable :min="1"
                                        :max="998" placeholder="起始值 1-998" :controls="false" />

                                </el-form-item>

                                <el-form-item prop="configRespList.0.annualEnd">
                                    <el-input-number v-model.number="channelForm.configRespList[0].annualEnd" clearable
                                        :min="1" :max="999" placeholder="结束值 1-999" :controls="false" />
                                </el-form-item>

                                <el-form-item label="期数间隔" prop="configRespList.0.intervalPeriod" style="margin:0 10px;">
                                    <el-input-number v-model.number="channelForm.configRespList[0].intervalPeriod"
                                        clearable :min="1" :max="999" placeholder="期数间隔" :controls="false" />
                                </el-form-item>
                                <el-form-item prop="">
                                    <BlackSelect style="width: 150px; margin-right:10px" disabled
                                        v-model:select-value="channelForm.configRespList[0].periodUnit"
                                        :options="expiryPeriodType" placeholder="请选择期数单位"></BlackSelect>
                                </el-form-item>

                            </div>
                        </el-form-item>
                        <!-- 2 -->
                        <el-form-item label="首期天数" prop="configRespList.0.firstPeriodDay"
                            v-if="channelForm.schemeType == '2'">
                            <el-input-number v-model.number="channelForm.configRespList[0].firstPeriodDay" clearable
                                style="width:150px" :min="1" :max="31" placeholder="首期天数 1 - 31" :controls="false" />
                        </el-form-item>

                        <el-form-item label="扣费金额" prop="configRespList.0.deductionMoney">
                            <el-input-number :precision="2" style="width: 150px;"
                                v-model.number="channelForm.configRespList[0].deductionMoney" clearable :min="0"
                                :max="99999" placeholder="扣费金额 0-99999" :controls="false" /> <span
                                style="width:200px;margin-left:5px"> 元</span>
                        </el-form-item>
                        <!-- 这个不用做循环 -->
                        <el-divider content-position="left">优惠券</el-divider>
                        <template v-for="(ticket, index) in channelForm.configRespList[0].detailsRespDtoList"
                            :key="index">
                            <template v-if="ticket.schemeConfigDetailsType == '1'">
                                <el-row>
                                    <el-col :span="5">
                                        <el-form-item label="立减金" label-width="70px" >
                                            <el-select v-model="ticket.objCode" @change="money(ticket, 1)" filterable
                                                style="width: 200px; margin-right:10px" placeholder="立减金" clearable>
                                                <el-option v-for="item in listCollect.equityList" :key="item.id"
                                                    :label="item.value" :value="item.key" />
                                            </el-select>

                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="领取数量" label-width="70px" prop="getNum">
                                            <el-input-number v-model.number="ticket.getNum" clearable
                                                :disabled="!ticket.objCode" :min="1" :max="999" placeholder="数量 0-999"
                                                :controls="false" />
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="6">
                                        <el-form-item label="发放方式" label-width="70px" >
                                            <el-radio-group v-model="ticket.grantType" :disabled="!ticket.objCode"
                                                @change="radioChange(ticket)">
                                                <el-radio v-for="(item, index) in grantType" :label="item.value" :key="index"
                                                :value="item.id"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-form-item label="领取链接" v-if="ticket.grantType == '2'" label-width="70px"
                                           >
                                            <el-input v-model.trim="ticket.userGetUrl" :maxlength="256"
                                                style="width: 200px; margin-right:10px" clearable></el-input>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="4">
                                        <el-form-item label="月立减金额" label-width="90px" >
                                            {{ ticket.getNum && couputedMoney && ticket.getNum * couputedMoney }} 元
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </template>
                            <template v-if="ticket.schemeConfigDetailsType == '2'">
                                <el-row>
                                    <el-col :span="5">
                                        <el-form-item label="停车券" label-width="70px" >
                                            <BlackSelect style="width: 200px; margin-right:10px"
                                                v-model:select-value="ticket.objCode" :options="expiryPeriodType"
                                                placeholder="停车券"></BlackSelect>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="领取数量" label-width="70px" prop="getNum">
                                            <el-input-number v-model.number="ticket.getNum" clearable
                                                :disabled="!ticket.objCode" :min="1" :max="999" placeholder="数量 0-999"
                                                :controls="false" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="发放方式" label-width="70px" >
                                            <el-radio-group v-model="ticket.grantType" :disabled="!ticket.objCode">
                                                <el-radio v-for="(item, index) in grantType" :label="item.value" :key="index"
                                                :value="item.id"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-form-item label="领取链接" label-width="70px" 
                                            v-if="ticket.grantType == '2'">
                                            <el-input v-model.trim="ticket.userGetUrl" :maxlength="256"
                                                :disabled="!ticket.objCode" clearable></el-input>
                                        </el-form-item>
                                    </el-col>



                                </el-row>
                            </template>
                            <template v-if="ticket.schemeConfigDetailsType == '3'">
                                <el-row>
                                    <el-col :span="5">
                                        <el-form-item label="虚拟会员" label-width="70px" >
                                            <BlackSelect style="width: 200px; margin-right:10px"
                                                v-model:select-value="ticket.objCode" :options="expiryPeriodType"
                                                placeholder="停车券"></BlackSelect>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="领取数量" label-width="70px" prop="getNum">
                                            <el-input-number v-model.number="ticket.getNum" clearable
                                                :disabled="!ticket.objCode" :min="1" :max="999" placeholder="数量 0-999"
                                                :controls="false" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="发放方式" label-width="70px" >
                                            <el-radio-group v-model="ticket.grantType" :disabled="!ticket.objCode">
                                                <el-radio v-for="(item, index) in grantType" :label="item.value" :key="index"
                                                :value="item.id"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="5">
                                        <el-form-item label="领取链接" label-width="70px" 
                                            v-if="ticket.grantType == '2'">
                                            <el-input v-model.trim="ticket.userGetUrl" :maxlength="256"
                                                :disabled="!ticket.objCode" clearable></el-input>
                                        </el-form-item>
                                    </el-col>

                                    <!-- <el-col :span="4" style="padding-left: 10px;" v-if="channelForm.schemeType == '2'">
                                        <el-button @click="deleteBtn(index, 1)">删除</el-button>
                                    </el-col> -->

                                </el-row>
                            </template>


                        </template>
                        <!-- <div style="display: flex;justify-content: center;" v-if="channelForm.schemeType == '2'">
                            <el-button type="primary" :icon="Plus" style="width: 500px;"
                                @click="laterAdd(1)">添加</el-button>
                        </div> -->



                    </template>
                    <template v-if="showModel == 2">
                        <el-divider content-position="left" v-if="channelForm.schemeType == '2'">签约（续约优惠）</el-divider>
                        <el-form-item label="续约期数" v-if="channelForm.schemeType == '2'" prop="configRespList.1.annualStart">
                            <div style="display: flex;">
                                <el-form-item prop="configRespList.1.annualStart" style="margin-right:10px;">
                                    <el-input-number v-model.number="channelForm.configRespList[1].annualStart"
                                        clearable :min="2" :max="998" placeholder="起始值 2-998" :controls="false" />
                                </el-form-item>

                                <el-form-item prop="configRespList.1.annualEnd" style="margin-right:10px;">
                                    <el-input-number v-model.number="channelForm.configRespList[1].annualEnd" clearable
                                        :min="2" :max="999" placeholder="结束值 2-999" :controls="false" />
                                </el-form-item>

                                <el-form-item label="期数间隔" prop="configRespList.1.intervalPeriod" style="margin-right: 10px">
                                    <el-input-number v-model.number="channelForm.configRespList[1].intervalPeriod"
                                        clearable :min="1" :max="998" placeholder="期数间隔" :controls="false" />
                                </el-form-item>

                                <el-form-item prop="periodUnit">
                                    <BlackSelect style="width: 150px; margin-right:10px" disabled
                                        v-model:select-value="channelForm.configRespList[1].periodUnit"
                                        :options="expiryPeriodType" placeholder="请选择期数单位"></BlackSelect>
                                </el-form-item>


                            </div>
                        </el-form-item>

                        <el-form-item label="扣费金额" prop="configRespList.1.deductionMoney">

                            <el-input-number v-model.number="channelForm.configRespList[1].deductionMoney" clearable
                                :precision="2" :min="0" :max="99999" placeholder="扣费金额 0-99999" :controls="false" />
                            <span style="margin-left:5px"> 元</span>
                        </el-form-item>
                        <!-- 这个不用做循环 -->
                        <el-divider content-position="left">优惠券</el-divider>
                        <template v-for="(ticket, index) in channelForm.configRespList[1].detailsRespDtoList"
                            :key="index">
                            <template v-if="ticket.schemeConfigDetailsType == '1'">
                                <el-row>
                                    <el-col :span="5">
                                        <el-form-item label="立减金" label-width="70px" >
                                            <el-select v-model="ticket.objCode" @change="money(ticket, 2)" filterable
                                                style="width: 200px; margin-right:10px" placeholder="立减金" clearable>
                                                <el-option v-for="item in listCollect.equityList" :key="item.id"
                                                    :label="item.value" :value="item.key" />
                                            </el-select>

                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="领取数量" label-width="70px" prop="getNum">
                                            <el-input-number v-model.number="ticket.getNum" clearable
                                                :disabled="!ticket.objCode" :min="1" :max="999" placeholder="数量 0-999"
                                                :controls="false" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="发放方式" label-width="70px" >
                                            <el-radio-group v-model="ticket.grantType" :disabled="!ticket.objCode"
                                                @change="radioChange2(ticket)">
                                                <el-radio v-for="(item, index) in grantType" :label="item.value" :key="index"
                                                :value="item.id"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-form-item label="领取链接" label-width="70px" 
                                            v-if="ticket.grantType == '2'">
                                            <el-input v-model.trim="ticket.userGetUrl" :maxlength="256"
                                                :disabled="!ticket.objCode" clearable></el-input>
                                        </el-form-item>
                                    </el-col>

                                    <el-col :span="4">
                                        <el-form-item label="月立减金额" label-width="90px" >
                                            {{ ticket.getNum && couputedMoney2 && ticket.getNum * couputedMoney2 }} 元
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </template>
                            <template v-if="ticket.schemeConfigDetailsType == '2'">
                                <el-row>
                                    <el-col :span="5">
                                        <el-form-item label="停车券" label-width="70px" >
                                            <BlackSelect style="width: 200px; margin-right:10px"
                                                v-model:select-value="ticket.objCode" :options="expiryPeriodType"
                                                placeholder="停车券"></BlackSelect>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="领取数量" label-width="70px" prop="getNum">
                                            <el-input-number v-model.number="ticket.getNum" clearable
                                                :disabled="!ticket.objCode" :min="1" :max="999" placeholder="数量 0-999"
                                                :controls="false" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="发放方式" label-width="70px" >
                                            <el-radio-group v-model="ticket.grantType" :disabled="!ticket.objCode">
                                                <el-radio v-for="(item, index) in grantType" :label="item.value" :key="index"
                                                :value="item.id"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-form-item label="领取链接" label-width="70px" 
                                            v-if="ticket.grantType == '2'">
                                            <el-input v-model.trim="ticket.userGetUrl" :maxlength="256"
                                                :disabled="!ticket.objCode" clearable></el-input>
                                        </el-form-item>
                                    </el-col>



                                </el-row>
                            </template>
                            <template v-if="ticket.schemeConfigDetailsType == '3'">
                                <el-row>
                                    <el-col :span="5">
                                        <el-form-item label="虚拟会员" label-width="70px" >
                                            <BlackSelect style="width: 200px; margin-right:10px"
                                                v-model:select-value="ticket.objCode" :options="expiryPeriodType"
                                                placeholder="停车券"></BlackSelect>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="领取数量" label-width="70px" prop="getNum">
                                            <el-input-number v-model.number="ticket.getNum" clearable
                                                :disabled="!ticket.objCode" :min="1" :max="999" placeholder="数量 0-999"
                                                :controls="false" />
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="6">
                                        <el-form-item label="发放方式" label-width="70px" >
                                            <el-radio-group v-model="ticket.grantType" :disabled="!ticket.objCode">
                                                <el-radio v-for="(item, index) in grantType" :label="item.value" :key="index"
                                                    :value="item.id"></el-radio>
                                            </el-radio-group>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="5">
                                        <el-form-item label="领取链接" label-width="70px" 
                                            v-if="ticket.grantType == '2'">
                                            <el-input v-model.trim="ticket.userGetUrl" :maxlength="256"
                                                :disabled="!ticket.objCode" clearable></el-input>
                                        </el-form-item>
                                    </el-col>

                                    <!-- <el-col :span="4" style="padding-left: 10px;" v-if="channelForm.schemeType == '2'">
                                        <el-button @click="deleteBtn(index, 2)">删除</el-button>
                                    </el-col> -->

                                </el-row>
                            </template>


                        </template>
                        <!-- <div style="display: flex;justify-content: center;" v-if="channelForm.schemeType == '2'">
                            <el-button type="primary" :icon="Plus" style="width: 500px;"
                                @click="laterAdd(2)">添加</el-button>
                        </div> -->
                    </template>

                </el-form>
            </div>
        </template>
        <template v-slot:myFooter>
            <div class="dialog-footer">
                <el-button @click="onClose">取消</el-button>



                <el-button @click="showModel = 1" v-if="channelForm.schemeType == '2' && showModel == 2">上一步</el-button>

                <el-button type="primary" @click="onNext"
                    v-if="channelForm.schemeType == '2' && showModel == 1">下一步</el-button>


                <el-button type="success" @click="onConfirmSimple" v-if="channelForm.schemeType == '1'">确定</el-button>
                <el-button type="success" @click="onConfirmComplex"
                    v-if="channelForm.schemeType == '2' && showModel == 2">确定</el-button>
            </div>
        </template>

    </SysDialogSlot>
</template>

<style lang="scss" scoped>
.channel-form {
    max-height: 600px;
    overflow: auto;
}

:deep(.el-radio__inner) {
    border-radius: 2px !important;
}

:deep(.el-radio__input.is-checked .el-radio__inner::after) {
    content: '';
    width: 8px;
    height: 3px;
    border: 1px solid black;
    border-top: transparent;
    border-right: transparent;
    text-align: center;
    display: block;
    position: absolute;
    top: 3px;
    left: 2px;
    transform: rotate(-45deg);
    border-radius: 0px;
    background: none;
}
</style>
